<template>
  <!-- 修改角色信息的弹出框 -->
  <el-dialog v-model="dialogFormVisible" title="修改角色" width="500" :before-close="closeDia">
    <div>
      <div style="margin-bottom: 10px">
        <span style="margin-right: 10px">角色名称</span>
        <el-input style="width: 280px" placeholder="请输入角色名称" v-model="role.name"></el-input>
      </div>
      <div style="margin-bottom: 10px">
        <span style="margin-right: 10px">权限名称</span>
        <el-input
          style="width: 280px"
          @blur="isEng"
          :class="{ active: ruleGrade }"
          placeholder="请输入角色名称"
          v-model="role.grade"
        ></el-input
        ><span style="color: red; font-size: 11px" v-if="ruleGrade">权限字符只能是英文！</span>
      </div>
      <div style="margin-bottom: 10px">
        <span style="margin-right: 10px">权限等级</span>
        <el-select v-model="role.role" placeholder="等级选择" style="width: 240px">
          <el-option
            v-for="item in roleGrade"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </div>
      <div style="margin-bottom: 10px">
        <span style="margin-right: 40px">状态</span>
        <el-radio-group v-model="role.status">
          <el-radio :value="1">正常</el-radio>
          <el-radio :value="0">停用</el-radio>
        </el-radio-group>
      </div>
      <div style="display: flex">
        <div><span>菜单权限</span></div>
        <div>
          <el-tree
            :data="menus"
            ref="tree"
            check-strictly
            show-checkbox
            node-key="id"
            :props="defaultProps"
            default-expand-all="true"
            style="width: 400px"
            @check="handlerCheck"
            :default-checked-keys="roleMenuIds"
          />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDia">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import titleUtil from '@/util/titleUtil'
import request from '@/util/request'
import { ElNotification } from 'element-plus'

const emit = defineEmits(['watch-form'])
const role = ref({})
const menus = ref([])
const roleMenuIds = ref([])
const tree = ref()
const checkedKeys = ref([])
const ruleGrade = ref(false)

const dialogFormVisible = ref(false)

const defaultProps = {
  children: 'childMenu',
  label: 'menuName'
}

const roleGrade = ref([
  { id: 1, label: '运营管理员' },
  { id: 2, label: '高级管理员' },
  { id: 3, label: '测试管理员' },
  { id: 4, label: '普通管理员' },
])

const handlerCheck = (keys, nodes) => {
  checkedKeys.value = nodes.checkedKeys
  console.log('--->', checkedKeys.value)
  role.value.menuIds = checkedKeys.value
}

const submit = () => {
  console.log('rols', role.value)
  request
    .post('/admin/role/updateRole', role.value)
    .then((res) => {
      ElNotification.success('修改成功')
      closeDia()
      emit('watch-form')
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

const isEng = () => {
  const grade = titleUtil.isEnglish(role.value.grade)
  console.log(grade)

  if (!grade) {
    ruleGrade.value = true
  } else {
    ruleGrade.value = false
  }
}

const closeDia = () => {
  role.value = {}
  menus.value = []
  roleMenuIds.value = []
  checkedKeys.value = []
  ruleGrade.value = false
  dialogFormVisible.value = false
}

const open = (item, menu) => {
  if (item === null) {
    dialogFormVisible.value = true
    menus.value = menu
    return
  }
  dialogFormVisible.value = true
  role.value = item
  menus.value = menu

  roleMenuIds.value = item.menuIds
  console.log(item)
  console.log(menu)

  var arr = []
  roleMenuIds.value.forEach((id) => {
    arr.push(id)
  })
  console.log(arr)

  tree.value.setCheckedKeys(arr, false)
}

defineExpose({
  open
})
</script>

<style scoped>
.active {
  border: rgb(255, 47, 0) 1px solid;
  border-radius: 5px;
}
</style>
